<template>
  <div style="padding:20px;">
    <ve-line
      :data="burnoutMap.chartData"
      :settings="burnoutMap.chartSettings"
      :extend="burnoutMap.chartExtend"
      :series="burnoutMap.series"
      :toolbox="burnoutMap.toolbox"
      height="300px"
    ></ve-line>
  </div>
</template>

<script>
import VeLine from "v-charts/lib/line.common";
export default {
  components: {
    VeLine
  },
  data() {
    return {
      burnoutMap: {}
    };
  },
  mounted() {
    this.burnoutMap = {
      loading: true,
      chartData: {
        columns: ["日期", "实际剩余任务", "理想剩余任务"],
        rows: [
          { 日期: "1月1日" },
          { 日期: "1月2日" },
          { 日期: "1月3日" },
          { 日期: "1月4日" },
          { 日期: "1月5日" },
          { 日期: "1月6日" },
          { 日期: "1月7日" },
          { 日期: "1月8日" }
        ]
      },
      toolbox: {
        show: true,
        feature: {
          dataZoom: {
            yAxisIndex: "none"
          }, //区域缩放，区域缩放还原
          dataView: {
            readOnly: false
          }, //数据视图
          magicType: {
            type: ["line", "bar"]
          }, //切换为折线图，切换为柱状图
          restore: {}, //还原
          saveAsImage: {}, //保存为图片
        }
      },
      series: [
        {
          type: "line",
          name: "实际剩余任务",
          smooth: false,
          color: "#1890ff",
          data: [5, 10, 15, 12, 13, 20, 21, 6, 16]
        },
        {
          type: "line",
          name: "理想剩余任务",
          color: "#52C41A",
          smooth: false,
          lineStyle: {
            type: "dashed"
          },
          data: [15, 10, 12, 4, 15, 17, 22, 16]
        }
      ],
      chartSettings: {},
      chartExtend: {
        grid: {
          left: "5",
          right: "20",
          top: "35",
          bottom: "0"
        },
        xAxis: {
          show: true,
          boundaryGap: false,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          show: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: ["#e4e4e4"]
            }
          }
        },
        tooltip: {
          backgroundColor: "#fff",
          textStyle: {
            color: "#333"
          },
          borderWidth: 1,
          borderColor: "#e8e8e8"
        },
        axisPointer: {
          lineStyle: {
            width: 0
          }
        }
      }
    };
  }
};
</script>
